<template>
	<view class="category-product-grid">
		<view class="products-grid">
			<view
				class="product-item"
				v-for="product in products"
				:key="product.id"
				@tap="onProductTap(product)"
			>
				<image
					:src="product.image || '/static/empty/no.jpg'"
					class="product-image"
					mode="aspectFill"
				/>
				<view class="product-info">
					<text class="product-name">{{ product.name }}</text>
					<view class="price-area">
						<text class="current-price">¥{{ product.price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { useCool } from "/@/cool";

defineProps<{
	products: any[];
	category: any;
}>();

const { router } = useCool();

function onProductTap(product: any) {
	router.push(`/pages/goods/detail?id=${product.id}`);
}
</script>

<style lang="scss" scoped>
.category-product-grid {
	padding: 0 16rpx;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16rpx;
}

.product-item {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
	}
}

.product-image {
	width: 100%;
	height: 200rpx;
	background-color: #f5f5f5;
}

.product-info {
	padding: 16rpx;
}

.product-name {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 12rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.price-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.current-price {
	font-size: 28rpx;
	font-weight: 600;
	color: #ff4757;
}
</style>
